<template>
  <header>
    <div class="left">
      <!-- 展开/收缩侧边栏 -->
      <el-icon :size="25" @click="changeCollapse">
        <Expand v-show="isCollapse" />
        <Fold v-show="!isCollapse" />
      </el-icon>
      <!-- 面包屑 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(bread, index) in currentBread" :key="index">
          {{  bread  }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="right">
      <div class="darkmode">
        <Dark />
      </div>
      <el-icon :size="28" @click="fullScreen">
        <FullScreen />
      </el-icon>
      <img :src="avatar" alt="" />
      <div class="userInfo">
        <p>昵称: <span>{{  nickname  }}</span></p>
        <p>{{  userStore.loginTimeFormat  }}</p>
      </div>
      <!-- 下拉菜单 -->
      <el-dropdown>
        <el-icon class="is-loading" :size="25">
          <Setting />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { computed } from '@vue/reactivity'
import Dark from './Dark.vue'
import { Fold, Expand, ArrowRight } from '@element-plus/icons-vue'
import screenfull from 'screenfull'
import { watchEffect, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import avatar from '../assets/avatar.jpg'
import { storeToRefs } from 'pinia';
import { useMenuStore } from "../store/menu";
import { useUserStore } from '../store/user'
import { getUserInfoApi } from '../api/auth'

const router = useRouter()
const menuStore = useMenuStore()
const userStore = useUserStore()
const { isCollapse } = storeToRefs(menuStore)
const { nickname, role } = storeToRefs(userStore)
// 全屏
function fullScreen() {
  if (!screenfull.isEnabled) { // 如果不允许进入全屏，发出不允许提示
    ElMessage.warning('不支持全屏')
    return false
  }
  screenfull.toggle()
}

function changeCollapse() {
  menuStore.isCollapse = !menuStore.isCollapse
}

let currentBread = ref(['首页', 'POKENMEN数据'])

const breadArr = computed(() => {
  return menuStore.breadArr
})

// 智能监测
watchEffect(() => {
  const currentPath = router.currentRoute.value.fullPath
  breadArr.value.forEach((bread: { children: any[]; title: string }) => {
    bread.children.forEach((cbread: { path: string; title: string }) => {
      if (cbread.path == currentPath) {
        currentBread.value = [bread.title, cbread.title]
      }
    })
  })
});

// 获取登录用户的用户名和角色
onMounted(() => {
  getUserInfoApi().then(res => {
    if (res.data.code === 2000) {
      userStore.role = res.data.role
      userStore.nickname = res.data.nickname
    }
  })
})
// 登出
function logout() {
  sessionStorage.removeItem('token')
  sessionStorage.removeItem('currentMenu')
  router.push('/login')
}
</script>

<style scoped lang="less">
header {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between; //分开布局
  align-items: center;

  .left {
    display: flex;
    align-items: center;

    .el-breadcrumb {
      margin: 0 10px;

      @media screen and(max-width:768px) {
        display: none;
      }
    }
  }

  .right {
    display: flex;
    align-items: center;
    margin-right: 10px;

    .darkmode {
      margin: 0 10px;
      position: relative;
      top: 2px;
    }

    img {
      height: 50px;
      border-radius: 50%;
      margin: 0 10px;
    }

    .userInfo {
      text-align: center;
      margin: 0 10px;

      p {
        color: #444;
        font-size: 15px;
        margin: 2px 0;

        span {
          color: skyblue;
        }
      }
    }

  }
}
</style>